<template>
  <select v-model="num">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>
  </select>

  <button @click="counterStore.increment(num)">+</button>
  <button @click="counterStore.decrement(num)">-</button>
  <button @click="counterStore.incrementIfOdd(num)">increment if odd</button>
  <button @click="counterStore.incrementAsync(num)">increment async</button>
</template>

<script lang="ts">
  export default {
    name: 'CounterUpdate'
  }
</script>
<script lang="ts" setup>
import { useCounterStore } from '@/stores/counter';
import { ref } from 'vue';

const num = ref<number>(1)
const counterStore = useCounterStore()
</script>

<style scoped>

</style>
